<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>综合服务系统</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!--公用样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/comment.css"/>
    <!--页面样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/it/common/css/style.css"/>
    <!--Layui-->
    <link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css" media="all"/>
    <!--扩展样式-->
    <link rel="stylesheet" href="${re.contextPath}/plugin/common/css/extended.css">
    <link rel="stylesheet" href="${re.contextPath}/plugin/css/khd.css">
    <link rel="stylesheet" href="${re.contextPath}/plugin/common/css/extended.css">
    <style>
        .header {
            margin: 0;
            padding: 10px 0;
            position: fixed;
            top: 0;
            z-index: 100;
            background: #FFFFFF;
            box-shadow: 0 0 5px #989898cc;
        }

        .container {
            width: 100%;
            padding-top: 80px;
            box-sizing: border-box;
            /*height: 100vh;*/
            background-color: #f9f9f9;
        }

        .delete button {
            width: 72px;
            height: 40px;
            margin: 30px auto;
            border-radius: 4px;
            background-color: #3e7ce7;
            color: #fff;
            line-height: 40px;
            border: 0;
        }

        .icons img {
            width: 100px;
            height: 60px;
            display: block;
            margin: 20px auto;
            border-radius: 4px;
        }

        .textTitle {
            width: 700px;
            padding-top: 15px;
            box-sizing: border-box;
            background: #FFFFFF;
            color: #333333;
            display: block;
            line-height: 2;
            height: auto;
        }

        .info img {
            width: 100%;
            height: 40%;
            min-width: 250px;
            min-height: 150px;
            margin: 0 auto;
        }

        .testbtn {
            width: 80px;
            height: 36px;
            border-radius: 50px;
            background-color: #3e7ce7;
            color: #fff;
            line-height: 36px;
            text-align: center;
            margin: 0 auto;
            border: 0;
        }

        .testbtndis {
            width: 80px;
            height: 36px;
            border-radius: 50px;
            background-color: #71767f;
            color: #fff;
            line-height: 36px;
            text-align: center;
            margin: 0 auto;
            border: 0;
        }

        .no_data {
            text-align: center;
            color: #6666;
            margin-top: 50px;
        }

        .layui-laypage .layui-laypage-curr .layui-laypage-em {
            background-color: #3e7ce7;
        }

        .btns {
            font-size: 14px;
            display: flex;
            justify-content: space-between;
        }

        .nodata {
            text-align: center;
            color: #999999;
            margin-top: 50px;
        }

        .layui-laypage a:hover {
            color: #3e7ce7;
        }

        .allTextList .lists {
            min-height: 450px;
            height: calc(100vh - 160px);
            position: relative;
        }

        /*.userInfo:hover #signout {*/
        /*    display: block !important;*/
        /*}*/

        /*#signout:hover {*/
        /*    display: block !important;*/
        /*}*/
    </style>
</head>

<body>
<a name="top"></a>
<#--	头部-->
<div class="header" style="">
    <div class="head" style="height: 60px;line-height: 60px;padding-left: 3%;">
        <a href="/main">
            <img src="${re.contextPath}/plugin/common/images/2@2x.png" style="width: 150px" alt="">
        </a>
    </div>
    <div class="head" style="display: flex;">
        <div class="nav">
            <a href="#top" style="display: block;width: 100px;">
                <div class="headNav" onclick="clicked(0)"
                     style="color: #3e7ce7;box-sizing: border-box;border-bottom: 2px solid #3e7ce7;">
                    首页
                </div>
            </a>
            <a href="#top" style="display: block;width: 100px;">
                <div class="headNav" onclick="clicked(1)" style="box-sizing: border-box;">我的</div>
            </a>
        </div>
        <div class="userInfo" style="position: relative;">
            <div style="line-height: 30px;float: left;">
                <span>欢迎您,${userName}</span><br>
                <a href="${re.contextPath}/logout"><span>退出</span></a>
            </div>
            <#if "${file}" !="${null}" && (file.xgtx) != "${null}">
                <img class="ml10" src="${file.xgtx}"
                     style="width: 50px;margin-left: 20px;float: left;border-radius: 50%;" alt=""
                     id="mainimg7">
            <#else>
                <#if "${user}" !="${null}" && (user.personType) == "002">
                    <img class="layui-upload-img ml10" id="mainimg7"
                         style="width: 50px;margin-left: 20px;float: left;border-radius: 50%;"
                         src="/plugin/common/images/zzlogo.jpg" alt="">
                <#else>
                    <img class="layui-upload-img ml10" id="mainimg7"
                         style="width: 50px;margin-left: 20px;float: left;border-radius: 50%;"
                         src="${re.contextPath}/plugin/common/images/29@2x.png" alt="">
                </#if>
            </#if>
        </div>
    </div>
</div>
<#--首页-->
<div class="container">
    <div class="titlePic"><img src="${re.contextPath}/plugin/common/images/hb.png" alt=""></div>
    <#--考试任务-->
    <div class="task">
        <div class="title">
            <img src="${re.contextPath}/plugin/common/images/rw.png" style="width: 20px;height: 20px;margin: 5px;"
                 alt="">
            <p style="margin-left: 10px;font-size: 18px">考试任务</p>
        </div>
        <div class="category">
            <a href="javascript:void(0);" style="width: 100px;">
                <div id="kstab" onclick="ksclick()"
                     style="color: #3e7ce7;text-align: center;box-sizing: border-box;border-bottom: 2px solid #3e7ce7;">
                    正式考试
                </div>
            </a>
            <a href="javascript:void(0);" style="width: 100px;">
                <div id="lxtab" onclick="lxclick()" style="text-align: center;box-sizing: border-box;">练习</div>
            </a>
            <a href="javascript:void(0);" style="width: 100px;">
                <div id="jgtab" onclick="jgclick()" style="text-align: center;box-sizing: border-box;">考试结果</div>
            </a>
        </div>
        <#--	正式考试-->
        <div id="ks" class="kscontent">
            <div id="kss" style="overflow: auto"></div>
            <div id="ks_pagination" style="width: 100%;text-align: center;margin-top: 20px;"></div>
        </div>
        <#--	练习-->
        <div id="lx" class="kscontent">
            <div id="lxs" style="overflow: auto;"></div>
            <div id="lx_pagination" style="width: 100%;text-align: center;margin-top: 20px;"></div>
        </div>
        <#--	考试结果-->
        <div id="jg">
            <table id="result_list" class="layui-hide" lay-filter="result_list"></table>
        </div>
    </div>
</div>
<#--我的-->
<div class="container" style="overflow: hidden;display: none;">
    <div class="kslist"
         style="width: 1150px;min-height: 600px;margin: 30px auto;display: flex;height: calc(100vh - 140px)">
        <div class="infos" style="width: 180px;padding-top: 20px;">
            <#if "${file}" !="${null}" && (file.xgtx) != "${null}">
                <img class="ml10" src="${file.xgtx}" style="width: 100px;height: 100px;border-radius: 50%;" alt=""
                     id="mainimg7">
            <#else>
                <#if "${user}" !="${null}" && (user.personType) == "002">
                    <img class="layui-upload-img ml10" id="mainimg7"
                         style="width: 100px;height: 100px;border-radius: 50%;"
                         src="/plugin/common/images/zzlogo.jpg" alt="">
                <#else>
                    <img class="layui-upload-img ml10" id="mainimg7"
                         style="width: 100px;height: 100px;border-radius: 50%;"
                         src="${re.contextPath}/plugin/common/images/29@2x.png" alt="">
                </#if>
            </#if>
            <p style="padding-left: 10px;margin-top: 15px">姓名：${userName}</p>
        </div>
        <div class="allTextList" style="width: 970px;">
            <div class="listNva"
                 style="width: 100%;height: 45px;line-height: 45px;display: flex;border-bottom: 1px solid #828282;">
                <a href="javascript:void(0);" style="width: 150px">
                    <div class="myTest" style="flex: 1;color: #3e7ce7;">
                        <div style=" width: 65px;height: 43px;" onclick="myinfo(1)">我的考试</div>
                    </div>
                </a>
                <a href="javascript:void(0);" style="width:150px">
                    <div class="myPractice" style="flex: 3;">
                        <div style="width: 65px;height: 43px;" onclick="myinfo(2)">我的练习</div>
                    </div>
                </a>
            </div>
            <div class="lists" id="test">
                <div id="mytest" style="overflow: auto;"></div>
                <div id="test_pagination"
                     style="width: 100%;text-align: center;margin-top: 20px;position: absolute;bottom: 0;"></div>
            </div>
            <div class="lists" id="practice">
                <div id="mypractise" style="overflow: auto;"></div>
                <div id="practise_pagination"
                     style="width: 100%;text-align: center;margin-top: 20px;position: absolute;bottom: 0;"></div>
                <#--                        <div class="list" style="width: 100%;height: 100px;background-color: #fff;display: flex;">-->
                <#--                            <div class="icons" style="width: 150px;">-->
                <#--                                <#if item.url>-->
                <#--                                    <img src="${item.url}" alt=""-->
                <#--                                         onerror="onerror=null;src='${re.contextPath}/plugin/common/images/fm.png';">-->
                <#--                                <#else>-->
                <#--                                    <img src="${re.contextPath}/plugin/common/images/fm.png" alt="">-->
                <#--                                </#if>-->
                <#--                            </div>-->
                <#--                            <div class="textTitle"-->
                <#--                                 style="width: 700px;padding-top: 15px;box-sizing: border-box;background: #FFFFFF">-->
                <#--                                <p style="font-size: 16px;">${item.examName}</p>-->
                <#--                                <p style="font-size: 14px;color: #828282">类型：${item.category} | 开始时间：${item.startTime} |-->
                <#--                                    状态：已参与</p>-->
                <#--                            </div>-->
                <#--                            <div class="delete" style="width: 120px;">-->
                <#--                                <div style="" onclick="jump('${item.stuExamId}')">-->
                <#--                                    详情-->
                <#--                                </div>-->
                <#--                            </div>-->
                <#--                        </div>-->
            </div>
        </div>
    </div>
</div>

</body>

<script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="${re.contextPath}/plugin/jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="${re.contextPath}/plugin/tools/tool.js"></script>
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/tabs.js"></script>

<script type="text/html" id="toolBarRow">
    {{# if(d.isMark=='1'){ }}
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit" style="margin-left: 0;">查看详情</a>
    {{# }else { }}
        <a class="layui-btn layui-btn-xs layui-btn-normal" style="margin-left: 0;">评分中</a>
    {{#  } }}
</script>

<script>
    var ks = $('#ks');
    var lx = $('#lx');
    var jg = $('#jg');
    var content = document.getElementsByClassName('container');
    var nav = document.getElementsByClassName('headNav');
    var mytest = document.getElementsByClassName('myTest');
    var mypractice = document.getElementsByClassName('myPractice');
    var signout = document.getElementById('signout')
    var layer;
    var table;
    var zsnum;
    var csnum;

    $(function () {
        lx.hide();
        jg.hide();
        $('#practice').hide();
        zsnum = ${zs};
        csnum = ${cs};
        grksnum = ${grks};
        grlxnum = ${grlx};

        layui.use(['laypage', 'layer'], function () {
            let laypage = layui.laypage, layer = layui.layer;

            function render(elems, count, limit, funs) {
                laypage.render({
                    elem: elems,
                    count: count,
                    limit: limit,
                    jump: function (obj) {
                        funs(obj)
                    }
                })
            }

            if (zsnum > 0) {
                render('ks_pagination', zsnum, 8, (obj) => {
                    $('#kss').html("");
                    request('/synthesize/seleExam', {
                        page: obj.curr,
                        limit: 8,
                        exstu: ''
                    }, function (res) {
                        res.data.forEach(item => {
                            let butt;
                            if (new Date(Date.parse(item.endTime)) < new Date() || new Date(Date.parse(item.startTime)) > new Date()){
                                butt = "<button class='testbtndis' onclick='starts(" + JSON.stringify(item.examId) + ",this)'>开始考试</button>";
                            }else {
                                butt = "<button class='testbtn' onclick='starts(" + JSON.stringify(item.examId) + ",this)'>开始考试</button>";
                            }

                          /*  if (!item.url){
                                item.url = '';
                            }*/
                            let $div="";
                            if (item.url){
                                $div = "<div class='info'><img src='" + item.url.replace(/\\/g, "/") + "' onerror='errload(this)'><p class='courseTitle' style='padding-left: 5px;'>" + item.examName + "</p><p class='time'>" + item.startTime + " | " + item.totalTime + "分钟 | " + item.passScore + "分为合格</p><div class='btns'><input type='hidden' value=" + item.examId + ">"+butt+"</div></div>";
                            }else{
                                //默认图片
                                 $div = "<div class='info'><img src='/plugin/common/images/fm.png' onerror='errload(this)'><p class='courseTitle' style='padding-left: 5px;'>" + item.examName + "</p><p class='time'>" + item.startTime + " | " + item.totalTime + "分钟 | " + item.passScore + "分为合格</p><div class='btns'><input type='hidden' value=" + item.examId + ">"+butt+"</div></div>";
                            }
                            $('#kss').append($div);
                        })
                        let info = $('.info');
                        let w = info.find('img').width();
                        info.find('img').height(w / 5 * 3);
                    })
                })
            } else {
                let $div = "<div class='nodata'>暂无可参加的考试</div>";
                $('#kss').append($div);
            }

            if (csnum > 0) {
                render('lx_pagination', csnum, 8, (obj) => {
                    $('#lss').html("");
                    request('/synthesize/seleTestExam', {
                        page: obj.curr,
                        limit: 8,
                        exstu: ''
                    }, function (res) {
                        res.data.forEach(item => {
                            let butt;
                            if (new Date(Date.parse(item.endTime)) < new Date() || new Date(Date.parse(item.startTime)) > new Date()){
                                butt = "<button class='testbtndis' >开始考试</button>";
                            }else {
                                butt = "<button class='testbtn' onclick='starts(" + JSON.stringify(item.examId) + ",this)'>开始考试</button>";
                            }
                            let $div="";
                            if(item.url){
                                 $div = "<div class='info'><img src='" + item.url.replace(/\\/g, "/") + "' onerror='errload(this)'><p class='courseTitle' style='padding-left: 5px;'>" + item.examName + "</p><p class='time'>" + item.startTime + " | " + item.totalTime + "分钟 | " + item.passScore + "分为合格</p><div class='btns'><input type='hidden' value=" + item.examId + ">"+butt+"</div></div>";
                            }else{
                                // 默认图片
                                $div = "<div class='info'><img src='/plugin/common/images/fm.png' onerror='errload(this)'><p class='courseTitle' style='padding-left: 5px;'>" + item.examName + "</p><p class='time'>" + item.startTime + " | " + item.totalTime + "分钟 | " + item.passScore + "分为合格</p><div class='btns'><input type='hidden' value=" + item.examId + ">"+butt+"</div></div>";
                            }
                            $('#lxs').append($div);
                        })
                        let info = $('.info');
                        let w = info.find('img').width();
                        info.find('img').height(w / 5 * 3);
                    })
                })
            } else {
                let $div = "<div class='nodata'>暂无可参加的练习</div>";
                $('#lss').append($div);
            }

            if (grksnum > 0) {
                render('test_pagination', grksnum, 10, (obj) => {
                    $('#mytest').html("");
                    request('/synthesize/selectStuExam', {
                        page: obj.curr,
                        limit: 10,
                        exstu: ''
                    }, function (res) {
                        res.data.forEach(item => {
                            let $div = "<div class='list' style='width: 100%;height: 100px;background-color: #fff;display: flex;'><div class='icons' style='width: 150px;'><img src=" + item.url + " alt='' onerror='errload(this)'></div><div class='textTitle' style=''><p style='font-size: 16px;'>" + item.examName + "</p><p style='font-size: 14px;color: #828282'>类型：" + item.category + " | 开始时间：" + item.startTime + " | 状态：已参与</p></div><div class='delete' style='width: 120px;'><button style='' onclick='jump(" + JSON.stringify(item.stuExamId) + ")'>详情</button></div></div>";
                            $('#mytest').append($div);
                        })
                    })
                })
            } else {
                let $div = "<div class='no_data'>暂无参加的考试</div>";
                $('#mytest').append($div);
            }

            if (grlxnum > 0) {
                render('practise_pagination', grlxnum, 10, (obj) => {
                    $('#mypractise').html("");
                    request('/synthesize/selectStuTestExam', {
                        page: obj.curr,
                        limit: 10,
                        exstu: ''
                    }, function (res) {
                        res.data.forEach(item => {
                            let $div = "<div class='list' style='width: 100%;height: 100px;background-color: #fff;display: flex;'><div class='icons' style='width: 150px;'><img src=" + item.url + " alt='' onerror='errload(this)'></div><div class='textTitle' style=''><p style='font-size: 16px;'>" + item.examName + "</p><p style='font-size: 14px;color: #828282'>类型：" + item.category + " | 开始时间：" + item.startTime + " | 状态：已参与</p></div><div class='delete' style='width: 120px;'><button style='' onclick='jump(" + JSON.stringify(item.stuExamId) + ")'>详情</button></div></div>";
                            $('#mypractise').append($div);
                        })
                    })
                })
            } else {
                let $div = "<div class='no_data'>暂无参加的练习</div>";
                $('#mypractise').append($div);
            }
        })
    })

    layui.use(['element', 'laydate', 'layer', 'table'], function () {
        layer = layui.layer;
        table = layui.table;


        table.render({
            id: 'result_list',
            elem: "#result_list",
            url: '/synthesize/selectExamResult',
            page: true,
            cols: [[
                {
                    title: '序号', width: '24.8%', unresize: true, templet: function (res) {
                        return res.LAY_INDEX;
                    }
                },
                {field: 'stuExamId', title: 'ID', hide: true, unresize: true, sort: false},
                {field: 'examName', width: '25%', title: '考试名称', unresize: true,},
                {field: 'startTime', width: '25%', title: '作答时间', unresize: true,},
                {field: 'remark', width: '25%', title: '操作', toolbar: '#toolBarRow', unresize: true,}
            ]],
        })

        table.on('tool(result_list)', function (res) {
            let data = res.data;
            if (res.event === 'edit') {
                window.open("/exam/client/ExamDetails?stuExamId=" + data.stuExamId);
            }
        })
    })

    function request(url, data, successCB) {
        $.ajax({
            url: url,
            type: 'post',
            data: data,
            traditional: true,
            success(res) {
                successCB(res)
            }
        })
    }

    function errload(obj) {
        obj.onerror = null;
        obj.src = "/plugin/common/images/fm.png";
    }

    // 个人页跳转详情
    function jump(id) {
        window.open("/exam/client/ExamDetails?stuExamId=" + id);
    }

    // 切换标签
    function myinfo(i) {
        let test = $('#test');
        let practice = $('#practice');
        setTimeout(() => {
            switch (i) {
                case 1:
                    test.show();
                    practice.hide();
                    mytest[0].style.color = '#3e7ce7';
                    mypractice[0].style.color = '#333333';
                    break;
                case 2:
                    test.hide();
                    practice.show();
                    mytest[0].style.color = '#333333';
                    mypractice[0].style.color = '#3e7ce7';
                    break;
            }
        }, 500)
    }

    // 切换页面
    function clicked(i) {
        let load = layer.load();
        setTimeout(() => {
            layer.close(load);
            switch (i) {
                case 0:
                    nav[0].style.color = '#3e7ce7';
                    nav[0].style.borderBottom = '2px solid #3e7ce7';
                    content[0].style.display = 'block';
                    nav[1].style.color = '#333333';
                    nav[1].style.borderBottom = '0';
                    content[1].style.display = 'none';
                    break;
                case 1:
                    nav[0].style.color = '#333333';
                    nav[0].style.borderBottom = '0';
                    content[0].style.display = 'none';
                    nav[1].style.color = '#3e7ce7';
                    nav[1].style.borderBottom = '2px solid #3e7ce7';
                    content[1].style.display = 'block';
                    break;
            }
        }, 200)
    }

    //开始考试
    function starts(id, obj) {
        let examId = $(obj).parent('div').find('input').val();
        // var type = "auto";
        let w = "70%";
        let h = "90%";
        let url = "/exam/client/prompt?examId=" + examId;
        layerAjaxGet('/exam/client/selectDetail', {
            examId: examId
        }, '', res => {
            if (res.flag) {
                layer.open({
                    id: 'form-add',
                    type: 2,
                    area: [w, h],
                    fix: false,
                    maxmin: true,
                    shadeClose: false,
                    shade: 0.4,
                    title: "温馨提示",
                    content: url,
                    end: function () {
                        // tableIns.reload();
                    }
                });
            } else {
                if (res.msg) {
                    let index = layer.open({
                        content: res.msg,
                        title: "提示",
                        yes: function () {
                            layer.close(index)
                        }
                    })
                } else {
                    let index = layer.open({
                        content: "系统错误！",
                        title: "提示",
                        yes: function () {
                            layer.close(index)
                        }
                    })
                }
            }
        })

    }

    let kstab = $('#kstab');
    let lxtab = $('#lxtab');
    let jgtab = $('#jgtab');

    // 点击正式考试
    function ksclick() {
        ks.show();
        kstab.css('color', '#3e7ce7');
        kstab.css('borderBottom', '2px solid #3e7ce7');
        lx.hide();
        lxtab.css('color', '#000000');
        lxtab.css('borderBottom', '0');

        jg.hide();
        jgtab.css('color', '#000000');
        jgtab.css('borderBottom', '0');

    }

    // 点击练习考试
    function lxclick() {
        ks.hide();
        kstab.css('color', '#000000');
        kstab.css('borderBottom', '0');
        lx.show();
        lxtab.css('color', '#3e7ce7');
        lxtab.css('borderBottom', '2px solid #3e7ce7');
        jg.hide();
        jgtab.css('color', '#000000');
        jgtab.css('borderBottom', '0');
    }

    // 点击考试结果
    function jgclick() {
        ks.hide();
        kstab.css('color', '#000000');
        kstab.css('borderBottom', '0');
        lx.hide();
        lxtab.css('color', '#000000');
        lxtab.css('borderBottom', '0');
        jg.show();
        jgtab.css('color', '#3e7ce7');
        jgtab.css('borderBottom', '2px solid #3e7ce7');

    }

    function moveIn() {
        if (signout.style.display == 'none') {
            signout.style.display = 'block';
        }
    }

    function moveOut() {
        console.log('a')
        setTimeout(() => {
            signout.style.display = 'none';
        }, 500)
    }
</script>

</html>



